<template>
  <div class="login-container">
    <div class="login-img">
      <img src="/chuneng/img/login-back.jpg" />
    </div>
    <div class="login-form">
      <div>
        <div class="title">
          <img src="/chuneng/img/title.png" />
        </div>
        <div class="form">
          <span> <img src="/chuneng/img/user.svg" /> <input placeholder="请输入用户名" @change="onUserInput"/></span>
          <span> <img src="/chuneng/img/pass.svg" /> <input placeholder="请输入密码" type="password" @change="onPassInput" /></span>
          <span>
            <button class="btn-login" @click="login">登录</button>
            <button class="btn-login" @click="login">注册</button>
          </span>
          <span><a style="color: red; text-decoration: underline;" @click="login">忘记密码?</a></span>
          <!-- 忘记密码&注册 -->
          <!-- <div class="buju">
            <span><text style="color: white;">忘记密码?</text></span>
            <text>注册新账号</text>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/utils/http";
// import { getBrowserInfo, getIpAddress } from '@/utils/utils';
// import back from '@/assets/back.svg'

export default {
  data() {
    return {
      msg: "",
      form: {
        utel: "",
        upass: "",
      },
      loading: null,
    };
  },

  methods: {
    onUserInput(e) {
      this.form.utel = e.target.value
    },
    onPassInput(e) {
      this.form.upass = e.target.value
      // console.log(e)
    },
    async login() {
      try {
        this.loading = true;
        let data = await login(this.form.utel, this.form.upass);
        
        this.$store.commit("login", data);
        // data = await get_all_data('all_data.json');

        // console.log(allData.cells)
        
        // this.$store.commit("allData", allData);
        // console.log(data)
        let path = decodeURIComponent(this.$route.query.redirect || "/");
        this.$router.push({ path: path });
      } catch (e) {
        this.$message.error("账号或密码错误！");
        // this.createCode();
      } finally {
        this.loading = false;
      }
    },
  },

  async mounted() {
    // this.$store.commit("phone", document.body.clientWidth < 760);
    // this.back = require("@/assets/back.svg");
    // this.avter = require("@/assets/login-portrait.png");
    // this.logobg = require("@/assets/back_logo.png");
    // this.createCode();
  },
};
</script>

<style>
#back {
  position: absolute;
  width: 100%;
  height: 100vh;
}
#login-contain {
  border-radius: 10px;
  padding: 20px;
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  background-color: #fffffff2;
  width: 700px;
  left: 1px;
  top: 1px;
  right: 1px;
  margin: auto;
  bottom: 1px;
  height: 400px;
  text-align: center;
  box-shadow: 0px 0px 18px 8px;
}
#code {
  font-size: 18px;
  letter-spacing: 3px;
  color: #031424;
  background: #f2f2f5;
}
.buju {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  padding-left: 40px;
  padding-right: 40px;
  color: white;
  width: 100%;
  background-color: white;
}
</style>